<template>
  <div class="login_and_register">
    <div v-if="!isRegister">
      <div v-if="isadmin">
        <el-form class="demo-ruleForm" :model="ruleForm" :rules="rules" ref="ruleForm">
          <h3 class="header-h3">管理员登录页面</h3>
          <el-form-item prop="adminName">
            <el-input type="text" v-model="ruleForm.adminName" placeholder="请输入管理员账号"></el-input>
          </el-form-item>
          <el-form-item prop="passWord">
            <el-input type="password" v-model="ruleForm.passWord" placeholder="请输入管理员密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="$store.state.loading"
              style="width:100%"
              @click="submitFormAdmin('ruleForm')"
            >提交</el-button>
          </el-form-item>
          <el-link type="primary" @click="userlogin">用户登录</el-link>
        </el-form>
      </div>
      <div v-else>
        <el-form class="demo-ruleForm" :model="userFrom" :userRules="userRules" ref="userFrom">
          <h3 class="header-h3">用户登录页面</h3>
          <el-form-item prop="adminName">
            <el-input type="text" v-model="userFrom.userName" placeholder="请输入用户账号"></el-input>
          </el-form-item>
          <el-form-item prop="passWord">
            <el-input type="password" v-model="userFrom.passWord" placeholder="请输入用户密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="$store.state.loading"
              style="width:100%"
              @click="submitFormUser('userFrom')"
            >提交</el-button>
          </el-form-item>
          <el-link type="primary" @click="adminlogin">管理员登录</el-link>
          <el-link type="primary" style="margin-left:15rem" @click="userRegister">用户注册</el-link>
        </el-form>
      </div>
    </div>
    <div v-else class="Register_wrap">
      <div class="Register">
        <el-form>
          <el-form-item :label="'账号: '">
            <el-input type="text" placeholder="用户账号" v-model="addUserForm.userName"></el-input>
          </el-form-item>
          <el-form-item :label="'密码: '">
            <el-input type="password" placeholder="用户密码" v-model="addUserForm.password"></el-input>
          </el-form-item>
          <el-form-item :label="'生日: '">
            <el-input type="text" placeholder="生日,比如格式'2000-10-7'" v-model="addUserForm.Birthday"></el-input>
          </el-form-item>
          <el-form-item :label="'年龄: '">
            <el-input type="text" placeholder="年龄Age" v-model="addUserForm.age"></el-input>
          </el-form-item>
          <el-form-item label="性别:">
            <el-radio v-model="addUserForm.sex" label="男">男</el-radio>
            <el-radio v-model="addUserForm.sex" label="女">女</el-radio>
          </el-form-item>
          <el-form-item :label="'职业: '">
            <el-input
              type="text"
              placeholder="比如您是个学生"
              v-model="addUserForm.job"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item :label="'喜好: '">
            <el-input
              type="textarea"
              :rows="2"
              maxlength="30"
              show-word-limit
              placeholder="请输入您的个人喜好,比如喜欢汉服"
              v-model="addUserForm.like"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isRegister=false">取 消</el-button>
          <el-button type="primary" @click="submitaddUserForm">确 定</el-button>
          <el-link type="primary" style="margin-left:15rem" @click="isRegister=false">返回登录</el-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      isadmin: false, //是否是管理员
      isRegister: false, //是登陆还是注册
      addUserForm: {
        userName: "",
        passWord: "",
        Birthday: "",
        age: "",
        sex: "",
        job: "",
        like: ""
      },
      rules: {
        adminName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" }
        ],
        passWord: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 4, max: 10, message: "长度在 5 到 10 个字符", trigger: "blur" }
        ]
      },
      userRules: {
        userName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" }
        ],
        passWord: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 4, max: 10, message: "长度在 5 到 10 个字符", trigger: "blur" }
        ]
      },
      ruleForm: {
        adminName: "",
        passWord: ""
      },
      userFrom: {
        userName: "",
        passWord: ""
      }
    };
  },
  methods: {
    adminlogin() {
      this.isadmin = true;
      this.ruleForm.adminName = this.ruleForm.passWord = null;
    },
    userlogin() {
      this.isadmin = false;
      this.ruleForm.adminName = this.ruleForm.passWord = null;
    },
    userRegister() {
      this.isRegister = true;
    },
    //添加用户
    submitaddUserForm() {
      if (
        this.addUserForm.userName &&
        this.addUserForm.like &&
        this.addUserForm.userName
      ) {
        this.$store.dispatch("addUser", this.addUserForm).then(res => {
          if (res.ok === 1) {
            // console.log(res, "注册成功");
            this.isRegister = false;
            this.$message({
              message: "注册成功,请登录",
              type: "success"
            });
            setTimeout(location.reload(), 1500);
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error"
            });
          }
        });
      } else {
        this.$message({
          showClose: true,
          message: "请将信息补充完整",
          type: "error"
        });
      }
    },
    //用户登录
    submitFormUser(formName) {
      localStorage.clear(); //清除localStorage
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$store.dispatch("userlogin", this).then(data => {
            if (data.ok === 1) {
              this.$router.history.push({ name: "userLog" });
              this.$store.commit("CHANGE_USER_INFO", data);
            } else {
              this.$message.error("账号或密码错误");
              this.userFrom.adminName = null;
              this.userFrom.passWord = null;
            }
          });
        } else {
          alert("账号或密码格式不正确");
        }
      });
    },
    //管理员登录
    submitFormAdmin(formName) {
      localStorage.clear(); //清除localStorage
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$store.dispatch("adminlogin", this).then(data => {
            if (data.ok === 1) {
              this.$router.history.push({ name: "adminLog" });
              this.$store.commit("CHANGE_ADMIN_INFO", data);
            } else {
              that.$message.error("账号或密码错误");
              that.ruleForm.adminName = null;
              that.ruleForm.passWord = null;
            }
          });
        } else {
          alert("账号或密码格式不正确");
        }
      });
    }
  }
};
</script>


<style lang="scss" scoped>
.login_and_register {
  margin: 0 auto;
  width: 100%;
  height: 40rem;
  .demo-ruleForm {
    margin-top: 10rem;
    opacity: 1;
    border: 1px solid #eaeaea;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 0px 1px rgb(115, 171, 207);
    margin: 50px auto;
    width: 400px;
  }
  .header-h3 {
    text-align: center;
  }
  .Register_wrap {
    .Register {
      width: 30rem;
      float: left;
      margin-left: 10rem;
      background: rgba(238, 134, 152, 0.1);
      padding: 0 2rem;
    }
  }
}
.login_and_register::after {
  content: "";
  background: url("~@/assets/adduser.png") no-repeat;
  background-size: 100%;
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
</style>